import React, { Component } from 'react'
import {
  View,
  StyleSheet
} from 'react-native'

// import { NavigationActions } from 'react-navigation'

import { connect } from 'react-redux'

// import TimerMixin from 'react-timer-mixin';
// import ReactMixin from 'react-mixin';

// import { productLogout } from '../../actions/product'
import { reset, resetSecond, push } from '../../actions/nav'
import Button from '../../components/common/button'
import {
  CENTER,
  PRODUCT,
  ANIMATE
} from '../../constants/pages'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 64
  }
})

class Product extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'Product'

    this.pushToPro = this.pushToPro.bind(this)
    this.pushToCenter = this.pushToCenter.bind(this)
    this.pushToAnimate = this.pushToAnimate.bind(this)
  }

  componentWillReceiveProps (nextProps) {
    const thisNav = this.props.nav
    const thisNavIndex = thisNav.index
    const nextNav = nextProps.nav
    const nextNavIndex = nextNav.index
    console.log('===Product  route==', thisNav, nextNav, thisNavIndex)
    console.log('==Product=1=', thisNav.routes[thisNavIndex].routeName)
    console.log('==Product=2=', nextNav.routes[nextNavIndex].routeName)
  }

  pushToPro () {
    const { dispatch } = this.props
    // dispatch(reset(CENTER, { puoduct: 'goods' }))
    dispatch(resetSecond(CENTER, PRODUCT, { puoduct: 'goods' }))
    // dispatch(productLogout({ name: 'test' }))
  }

  pushToAnimate () {
    this.props.dispatch(push(ANIMATE, { user: 'Lucy' }))
  }

  pushToCenter () {
    const { dispatch } = this.props
    dispatch(reset(CENTER, { puoduct: 'goods' }))
  }

  render () {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.pushToPro}
          style={{ margin: 20 }}
          buttonTitle={'Product'}
        />
        <Button
          onPress={this.pushToCenter}
          style={{ margin: 20 }}
          buttonTitle={'去个人中心'}
        />
        <Button
          onPress={this.pushToAnimate}
          style={{ margin: 20 }}
          buttonTitle={'下一页'}
        />
      </View>
    )
  }
}

Product.propTypes = {
}

Product.navigationOptions = {
  headerTitle: 'Product'
}

function mapStateToProps (state) {
  const { nav } = state
  return {
    nav,
    state
  }
}

function mapDispatchToProps (dispatch) {
  return {
    dispatch
  }
}

// ReactMixin(Foo.prototype, TimerMixin);

export default connect(mapStateToProps, mapDispatchToProps)(Product)
// export default Product;
